/*
* @Author: 董洌淇
* @Date: 2020年12月4日14:09:59
* @Last Modified by: 董洌淇
* @Last Modified time: 2020年12月4日14:10:03
* @Description: 历史数据页面-标识，暂时无用
*/
<template>
	<view class="historical-data">
		<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText"></block><block slot="content">历史数据</block></cu-custom>
		<view class="search-type">
			<view class="tags">
				<picker @change="deviceTypeChange" :value="deviceTypeIndex" :range="deviceType" range-key="name">
					<view class="picker">
						{{deviceType.length > 0 ? deviceType[deviceTypeIndex].name : '设备类型'}}
						<text class="cuIcon-unfold margin-l-10upx"></text>
					</view>
				</picker>
			</view>
			<view class="tags">
				<picker @change="deviceNameChange" :value="deviceNameIndex" :range="deviceName" range-key="deviceName">
					<view class="picker">
						{{deviceName.length > 0 ? deviceName[deviceNameIndex].deviceName : '设备名称'}}
						<text class="cuIcon-unfold margin-l-10upx"></text>
					</view>
				</picker>
			</view>
		</view>
		<view class="time-data">
			<view @click="onShowDatePicker('datetime')" class="btn-style">{{ datetime ? datetime: '选择日期时间' }}</view>
		</view>
		
		<view class="list-box">
			<!-- <view class="device-details" v-for="(item, index) in changeHeader" :key="index">
				<text>{{ item.name }}</text>
				<text>{{ item.value }}</text>
			</view> -->
			
			<view v-for="(item, index) in dataList" :key="item.id" class="device-style margin-t-30upx">
				<!--PID实时数据-->
				<view class="device-details" v-if="filter.dataType === 1">
					<text>{{ pidHeader.independent }}:</text><!--TVOC-->
					<text>{{ item['a24087-Rtd'] }}</text>
				</view>
				<!--FID实时数据-->
				<view v-if="filter.dataType === 2">
					<view class="device-details">
						<text>{{ pidHeader.nmhc }}:</text><!--NMHC-->
						<text>{{ item['a24088-Rtd'] }}</text>
					</view>
					<view class="device-details">
						<text>{{ pidHeader.totalHydrocarbon }}:</text><!--总烃-->
						<text>{{ item['a24087-Rtd'] }}</text>
					</view>
					<view class="device-details">
						<text>{{ pidHeader.methane }}:</text><!--甲烷-->
						<text>{{ item['a05002-Rtd'] }}</text>
					</view>
					<view class="device-details">
						<text>{{ pidHeader.benzene }}:</text><!--苯-->
						<text>{{ item['a25002-Rtd'] }}</text>
					</view>
					<view class="device-details">
						<text>{{ pidHeader.methylbenzene }}:</text><!--甲苯-->
						<text>{{ item['a25003-Rtd'] }}</text>
					</view>
					<view class="device-details">
						<text>{{ pidHeader.xylene }}:</text><!--二甲苯-->
						<text>{{ item['a25005-Rtd'] }}</text>
					</view>
					<view class="device-details">
						<text>{{ pidHeader.acetone }}:</text><!--丙酮-->
						<text>{{ item['a31024-Rtd'] }}</text>
					</view>
				</view>
				<!--颗粒物实时数据-->
				<view v-if="filter.dataType === 3">
					<view class="device-details">
						<text>{{ pidHeader.dust }}:</text><!--PM2.5-->
						<text>{{ item['a34004-Rtd'] }}</text>
					</view>
					<view class="device-details">
						<text>{{ pidHeader.Inhalable }}:</text><!--PM10-->
						<text>{{ item['a34002-Rtd'] }}</text>
					</view>
				</view>
				<!--公用-->
				<view class="device-details">
					<text>{{ pidHeader.temperature }}:</text><!--温度-->
					<text>{{ item['a01001-Rtd'] }}</text>
				</view>
				<view class="device-details">
					<text>{{ pidHeader.humidity }}:</text><!--湿度-->
					<text>{{ item['a01002-Rtd'] }}</text>
				</view>
				<view class="device-details">
					<text>{{ pidHeader.barometricPressure }}:</text><!--大气压-->
					<text>{{ item['a01006-Rtd'] }}</text>
				</view>
				<view class="device-details">
					<text>{{ pidHeader.windSpeed }}:</text><!--风速-->
					<text>{{ item['a01007-Rtd'] }}</text>
				</view>
				<view class="device-details">
					<text>{{ pidHeader.windDirection }}:</text><!--风向-->
					<text>{{ item['a01008-Rtd'] }}</text>
				</view>
				<view class="device-details">
					<text>{{ pidHeader.time }}:</text><!--时间-->
					<text>{{ item.time }}</text>
				</view>
			</view>
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :show-minutes="false" :show-seconds="false" @confirm="onSelected" @cancel="onSelected" />
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/appicon-72.png" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import MxDatePicker from '@/components/mx-datepicker/mx-datepicker'
	import { getRealtimeDataApi, getDeviceList } from '@/api/dataListApi'
	import { parseTimestamp } from '@/utils/methods'
	import realTimeDataConfig from './config.js'
	export default {
		name: 'historicalData',
		components: { MxDatePicker },
		data() {
			return {
				// changeHeader: realTimeDataConfig[6], // 标题列表
				loadModal: false, // loading 状态
				pidHeader: realTimeDataConfig[0],
				deviceTypeIndex: 0, // 设备类型下拉菜单默认选项
				deviceNameIndex: 0, // 设备名称下拉菜单默认选项
				deviceType: [ // 设备类型列表
					{ value: 1, name: 'PID平均数据' },
					{ value: 2, name: 'FID平均数据' },
					{ value: 3, name: '颗粒物平均数据' }
				],
				deviceName: [], // 设备名称列表
				filter: { // 设备名称请求条件
				    dataType: '1',
				    dateType: '1m',
				    factors: ['a24087-Rtd', 'a01008-Rtd', 'a01007-Rtd', 'a01006-Rtd', 'a01001-Rtd', 'a01002-Rtd'],
				    deviceId: '',
				    timeStamp: +new Date(),
				    timeSpan: 'h'
				},
				dataHeader: {}, // 动态标题
				dataList: [], // 展示详情数据
				showPicker: false, // 时间选择器状态控制
				datetime: parseTimestamp('yyyy-MM-dd', +new Date()), // 默认时间 格式： 2019/01/01 15:00:12
				type: 'datetime', // 时间选择器类型
				value: '' // 时间值的值
			}
		},
		mounted () {
			this.$nextTick(() => {
				this.getDataList()
			})
		},
		methods: {
			// 时间组件显示
			 onShowDatePicker(type){
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			// 选中时间
			onSelected(e) {
				this.showPicker = false;
				if(e) {
					this[this.type] = e.value; 
					//选择的值
					console.log('value => '+ e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
					this.filter.timeStamp = Date.parse(e.value),
					this.getDataTable()
				}
			},
			// 设备类型下拉选择
			deviceTypeChange(e) {
				this.deviceTypeIndex = e.detail.value
				// let type = this.deviceType[e.detail.value].value
				// if (type === 1) { // PID
				// 	this.changeHeader = realTimeDataConfig[6]
				// } else if (type === 2) { // FID
				// 	this.changeHeader = realTimeDataConfig[7]
				// } else if (type === 3) { // 颗粒物
				// 	this.changeHeader = realTimeDataConfig[8]
				// }
				this.getDataList()
			},
			// 设备名称下拉选择
			deviceNameChange (e) {
				this.filter.deviceId = this.deviceName[this.deviceNameIndex].id
				this.deviceNameIndex = e.detail.value
				this.getDataTable()
			},
			// 获取设备名称列表
			getDataList () {
				this.deviceName = []
				let deviceNumber = this.deviceType[this.deviceTypeIndex].value
				this.filter.dataType = deviceNumber
				let params = { deviceTypeId: deviceNumber }
				getDeviceList(params).then(res => {
					if (res.data.code === 0) {
						this.deviceName = res.data.data
						this.getDataTable()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 获取设备表格LIST数据
			getDataTable () {
				this.loadModal = true
				this.dataList = []
				this.filter.deviceId = this.deviceName[this.deviceNameIndex].id
				getRealtimeDataApi(this.filter).then(res => {
					if (res.data.code === 0) {
						res.data.data.map((v) => { // 解析时间戳
							v['a24087-Rtd'] = v['a24087-Rtd'] ? Number(v['a24087-Rtd']).toFixed(3) : '0.00' // TVOC
							v['a24088-Rtd'] = v['a24088-Rtd'] ? Number(v['a24088-Rtd']).toFixed(3) : '0.00' // NMHC
							v['a24087-Rtd'] = v['a24087-Rtd'] ? Number(v['a24087-Rtd']).toFixed(3) : '0.00' // 总烃
							v['a05002-Rtd'] = v['a05002-Rtd'] ? Number(v['a05002-Rtd']).toFixed(3) : '0.00' // 甲烷
							v['a25002-Rtd'] = v['a25002-Rtd'] ? Number(v['a25002-Rtd']).toFixed(3) : '0.00' // 苯
							v['a25005-Rtd'] = v['a25005-Rtd'] ? Number(v['a25005-Rtd']).toFixed(3) : '0.00' // 二甲苯
							v['a31024-Rtd'] = v['a31024-Rtd'] ? Number(v['a31024-Rtd']).toFixed(3) : '0.00' // 丙酮
							v['a34004-Rtd'] = v['a34004-Rtd'] ? Number(v['a34004-Rtd']).toFixed(3) : '0.00' // PM2.5
							v['a34002-Rtd'] = v['a34002-Rtd'] ? Number(v['a34002-Rtd']).toFixed(3) : '0.00' // PM10
							v['a01008-Rtd'] = v['a01008-Rtd'] ? Number(v['a01008-Rtd']).toFixed(3) : '0.00' // 风向
							v['a01007-Rtd'] = v['a01007-Rtd'] ? Number(v['a01007-Rtd']).toFixed(3) : '0.00' // 风速
							v['a01006-Rtd'] = v['a01006-Rtd'] ? Number(v['a01006-Rtd']).toFixed(3) : '0.00' // 大气压
							v['a01001-Rtd'] = v['a01001-Rtd'] ? Number(v['a01001-Rtd']).toFixed(3) : '0.00' // 温度
							v['a01002-Rtd'] = v['a01002-Rtd'] ? Number(v['a01002-Rtd']).toFixed(3) : '0.00' // 湿度
							v.time = parseTimestamp('yyyy-MM-dd hh:mm:ss', v.time)
						})
						// res.data.data.map(v => {
						// 	for (var i = 0; i < this.changeHeader.length; i++) { // 通过配置映射key值下的value
						// 		this.changeHeader[i].value = v[this.changeHeader[i].key]
						// 	}
						// })
						this.dataList = res.data.data
						this.loadModal = false
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.historical-data {
		.time-data {
			border-top: 1px solid $uni-border-color;
			.btn-style {
				display: block;
				text-align: center;
				background-color: $uni-bg-color;
				padding: 30upx;
			}
		}
		.search-type {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: $uni-bg-color;
			.tags {
				display: block;
				width: 50%;
				padding: 30upx 0 30upx;
				text-align: center;
			}
		}
		.list-box {
			.device-style {
				background: $uni-bg-color;
				.device-details {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30upx;
				}
			}
		}
	}
</style>
